<template>
    <div class="flex items-center justify-center min-h-screen bg-gray-100">
      <el-card class="w-96 p-6 rounded-xl shadow-lg bg-white">
        <h2 class="text-center text-2xl font-semibold mb-6">登录</h2>

        <el-form :model="form" ref="formRef" label-width="80px" class="space-y-4">
          <el-form-item label="用户名" :rules="usernameRules" prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名" />
          </el-form-item>

          <el-form-item label="密码" :rules="passwordRules" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="请输入密码"
            />
          </el-form-item>

          <el-form-item class="flex justify-center">
            <el-button
              type="primary"
              class="w-full"
              :loading="loading"
              @click="handleLogin"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>

  <script setup>
  import { ref } from 'vue'
  import { ElForm, ElFormItem, ElInput, ElButton, ElCard } from 'element-plus'

  const form = ref({
    username: '',
    password: '',
  })

  const loading = ref(false)

  const formRef = ref(null)

  const usernameRules = [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ]

  const passwordRules = [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ]

  const handleLogin = async () => {
    try {
      loading.value = true
      // 模拟异步登录请求
      setTimeout(() => {
        loading.value = false
        alert('登录成功！')
      }, 2000)
    } catch (error) {
      loading.value = false
      console.error('登录失败', error)
    }
  }
  </script>

  <style scoped>
  /* 使用 WindiCSS 提供的实用类 */
  </style>
